﻿@using System.Configuration
@{
    ViewBag.Title = "Quản Lý Nhân Viên";
    Layout = "~/Views/Shared/_Admin_Layout.cshtml";
}
@section CssImport
{
    <style>
        .child-opener-image
        {
            cursor: pointer;
        }
        .child-opener-image-column
        {
            text-align: center;
        }
        .jtable-dialog-form
        {
            min-width: 220px;
        }
        .jtable-dialog-form input[type="text"]
        {
            min-width: 200px;
        }
    </style>
}
<div id="div-main-menu" class="left-side-bar">
    @Html.Partial("_AdminMenu")
</div>
<div id="div-main-content" class="right-side-bar">
    <h2>QUẢN LÝ ĐƠN TRẢ MUỘN SÁCH</h2>
    <div class="filtering">
        <form>        
            <label>Họ và tên:</label><input type="text" name="name" id="name" />        
            <button type="submit" id="LoadRecordsButton">Search</button>
        </form>
    </div>
    <div id="LibraryEmployeeContainer"></div>
    <script type="text/javascript">
    $(document).ready(function () {
        $('#LibraryEmployeeContainer').jtable({
            title: 'Danh Sách Nhân Viên',
            paging: true, //Enable paging
            pageSize: @Html.Raw(ConfigurationManager.AppSettings["PageSize"].ToString()),
            sorting: true, //Enable sorting
            defaultSorting: 'FirstName ASC',
            //openChildAsAccordion: true, //Enable this line to show child tabes as accordion style
            actions: {
                listAction: '@Url.Action("GetEmployeeList", "Employee")',          
                updateAction: '@Url.Action("UpdateEmployee", "Employee")',
                createAction: '@Url.Action("AddEmployee", "Employee")'
            },
            fields: {
                ID: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                UserName: {
                    title: 'Tên đăng nhập',
                    edit: false,
                    list: false
                },
                FirstName: {
                    title: 'Tên'                 
                },
                LastName: {
                    title: 'Họ và Tên lót'
                },
                BirthDay: {
                    title: 'Ngày sinh',
                    type: 'date',
                    displayFormat: 'yy-mm-dd'
                },
                Email: {
                    title: 'Email'
                }
            },
            //validate cac field trong bang Libraty_Books
            formCreated: function (event, data) {
                data.form.find('input[name="UserName"]').addClass('validate[required]');
                data.form.find('input[name="FirstName"]').addClass('validate[required]');
                data.form.find('input[name="LastName"]').addClass('validate[required]');
                data.form.find('input[name="BirthDay"]').addClass('validate[required,custom[date]]');
                data.form.find('input[name="Email"]').addClass('validate[required,custom[email]]');                            
                data.form.validationEngine();
            },
            formSubmitting: function (event, data) {
                return data.form.validationEngine('validate');
            },
            formClosed: function (event, data) {
                data.form.validationEngine('hide');
                data.form.validationEngine('detach');
            },
        });
        //Load person list from server
        $('#LoadRecordsButton').click(function (e) {
            e.preventDefault();
            $('#LibraryEmployeeContainer').jtable('load', {             
                name: $('#name').val(),             
            });
        });
        //Load all records when page is first shown
        $('#LoadRecordsButton').click();
    });
</script>
</div>
<div style="clear: both"></div>
